<template>
  <p>{{ name }}</p>
  <!-- <button @click="name = '阿里巴巴'">修改 name</button> -->
  <button @click="handleClick">修改 name</button>
</template>

<script>
// 需求：点击按钮修改 name
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    const person = reactive({
      name: '迪丽热巴',
    })
    const { name } = toRefs(person)
    const handleClick = () => {
      // person.name = '阿里巴巴'
      name.value = '阿里巴巴'
    }
    return {
      name,
      handleClick,
    }
  },
}
</script>
